<template>
  <el-container>
    <el-header>信息列表</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>

      <el-main>
        <el-button @click="add">添加</el-button>
        <el-table
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
        >
          <el-table-column label="Date" prop="date"></el-table-column>
          <el-table-column label="姓名" prop="userName"></el-table-column>
          <el-table-column label="密码" prop="password"></el-table-column>
          <el-table-column label="手机号" prop="phone"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-size="limit"
            @current-change="Fn"
            layout="sizes,prev, pager, next"
            :total="total"
            :page-sizes="[2, 4, 6, 8]"
             @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-main>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="form.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="userAdd">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改地址" :visible.sync="dialogFormVisibles">
        <el-form :model="form">
          <el-form-item label="名字" :label-width="formLabelWidth">
            <el-input v-model="form.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
          <el-button type="primary" @click="updateFn">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  name: "home",
  components: {},
  data() {
    return {
      tableData: [],
      search: "",
      currentPage4: 0,
      total: 0,
      limit: 4,
      pagenum: 1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisibles:false,
      form: {
        userName: "",
        password: "",
        phone: ""
      },
      id:0,
      formLabelWidth: "120px"
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(this.form.userName);
      
      this.form.userName=row.userName
      this.form.password=row.password
      this.form.phone=row.phone
      console.log(row);

      this.id=row.id
      //修改
      this.dialogFormVisibles = true;
      
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row.id);

          axios.get("/api/delect", { params: { id: row.id } }).then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getData();
            } else {
              this.$message({
                type: "info",
                message: "删除失败"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    Fn(cur) {
      this.pagenum = cur;
      this.getData();
    },
    getData() {
      axios
        .get("/api/userList", {
          params: { limit: this.limit, pagenum: this.pagenum }
        })
        .then(res => {
          console.log(res);

          this.tableData = res.data.msg;
          this.total = res.data.total;
        });
    },
    add() {
      this.dialogFormVisible = true;
    },
    userAdd() {
      //点击添加
      axios.post("/api/add", { ...this.form }).then(res => {
        if (res.data.code === 1) {
          this.$message({
            type: "success",
            message: "添加成功!"
          });
          this.getData();
          this.reast();
        } else {
          this.$message({
            type: "info",
            message: "缺少参数"
          });
        }
      });
      this.dialogFormVisible = false;
    },
    reast() {
      this.form = {
        userName: "",
        password: "",
        phone: ""
      };
    },
    updateFn(){
          axios.post("/api/emit", { ...this.form, id: this.id }).then((res) => {
        if (res.data.code === 1) {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          this.getData()
          this.reast()
           this.dialogFormVisibles = false;
        } else {
          this.$message({
            type: "info",
            message: "数据缺少"
          });
        }
      });
    },
    handleSizeChange(key){
     this.limit=key
     this.getData()
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style  scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

.el-container {
  height: 100%;
}
</style>
